//列表页
import React, { Component } from 'react';
import axios from "axios"
import "./list.scss"
class List extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            listArr:[],
            page:1,
            end:false
         }
    }
    componentDidMount() {
        this.getListData()
        this.listScroll()
    }
    //获取数据
    getListData=()=>{
        axios.get("/item/ws/group_list?current_page="+this.state.page+"&page_size=24&group_id=23204&device_id=4fa3edf0-a6ef-11eb-8761-252245950576").then((res) => {
            console.log(res.data.data.item_list)
            this.setState({listArr:res.data.data.item_list})
        })
    }
    listScroll=()=>{

        window.onscroll=()=>{
            let scrollTop=document.documentElement.scrollTop
            let windowHeight=document.documentElement.clientHeight
            let scrollHeight=document.body.scrollHeight;
            if(scrollHeight-scrollTop-1<=windowHeight){
                // console.log("chudile")
                this.setState({page:this.state.page+1})
                this.moreData()
            }
        }
    }
    //卸载前的钩子函数
    componentWillUnmount(){
        //解除绑定
        window.onscroll=undefined;

    }
    moreData=()=>{
        if(!this.state.end){
            axios.get("/item/ws/group_list?current_page="+this.state.page+"&page_size=24&group_id=23204&device_id=4fa3edf0-a6ef-11eb-8761-252245950576").then((res) => {
                console.log(res.data.data.item_list)
                let data=res.data.data.item_list
                if(data!==undefined){
                    let oldList=this.state.listArr
                    let newArr=oldList.concat(res.data.data.item_list)
                    this.setState({listArr:newArr})
                }else{
                    this.setState({end:true})
    
                }
                
            })
        }
        
    
    }
    goNext=()=>{
        console.log(this.props.history.go(-1))
    }

    render() { 
        const {listArr,end}=this.state
        return ( 
            <div className="list">
                <div className="list_top"><span className="jiantou" onClick={this.goNext}></span>补水保湿</div>
                <ul className="list_foot">
                    {
                        listArr.map((item,index)=><li key={item.item_id}>
                            <div className="pic"><img src={item.over_image_url} alt=""/></div>
                            <div className="name">{item.item_short_name}</div>
                            <div className="price"><span>￥{item.max_price/100}</span><img src="https://wstimg-dev.oss-cn-hangzhou.aliyuncs.com/upload/8f48b66a.png"  alt=""/></div>
                        </li>)
                    }
                </ul>
                {
                    end?<div style={{textAlign:"center"}}>这是我的底线.........</div>:null
                }
            </div>
         );
    }
}
 
export default List;